<template>
  <div class="app-box" @click="onClick">
    <el-icon size="50" color="#409EFF">
      <slot></slot>
    </el-icon>
    <span class="app-span">{{ props.content }}</span>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";

const router = useRouter();

const props = defineProps({
  content: {
    type: String,
    required: true
  },
  url: {
    type: String,
    required: true
  }
})

const onClick = () => {
  router.push(props.url as string);
}

</script>

<style scoped>

.app-box{
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.app-span{
  color: #1F1F1F;
  font-weight: bold;
}

</style>